<template>
	<view class="culture-page">
		<!-- 沉浸式头部 -->
		<view class="immersive-header">
			<swiper class="header-swiper" :autoplay="true" :interval="5000" :duration="1000" :circular="true">
				<swiper-item v-for="(item, index) in bannerImages" :key="index">
					<image :src="item.image" class="header-bg" mode="aspectFill" />
				</swiper-item>
			</swiper>

			<!-- 渐变遮罩 -->
			<view class="header-gradient"></view>

			<!-- 头部内容 -->
			<view class="header-content">
				<view class="culture-badge">
					<text class="badge-emoji">🏛️</text>
					<text class="badge-text">千年传承</text>
				</view>
				<text class="main-title">梁河葫芦丝</text>
				<text class="sub-title">文化脉络</text>
				<text class="description">探寻千年文化的发展足迹</text>
			</view>
		</view>

		<!-- 历史时光轴 -->
		<view class="timeline-section">
			<view class="section-header">
				<view class="header-decoration">
					<view class="deco-line"></view>
					<view class="deco-circle">📜</view>
					<view class="deco-line"></view>
				</view>
				<text class="section-title">历史长河</text>
				<text class="section-desc">追溯葫芦丝的千年发展历程</text>
			</view>

			<view class="timeline-container">
				<view class="timeline-line"></view>
				<view v-for="(item, index) in timelineData" :key="index" class="timeline-item"
					:class="{ 'reverse': index % 2 === 1 }">
					<!-- 时间轴标记 -->
					<view class="timeline-marker">
						<view class="marker-ring">
							<text class="marker-icon">{{ item.icon }}</text>
						</view>
						<view class="marker-pulse"></view>
					</view>

					<!-- 内容卡片 -->
					<view class="timeline-card">
						<view class="card-header">
							<view class="period-badge">{{ item.era }}</view>
							<text class="period-title">{{ item.period }}</text>
						</view>
						<text class="period-subtitle">{{ item.subtitle }}</text>
						<view class="content-section">
							<text v-for="(paragraph, pIndex) in item.content" :key="pIndex" class="content-text">
								{{ paragraph }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 文化特色展示 -->
		<view class="features-section">
			<view class="section-header">
				<view class="header-decoration">
					<view class="deco-line"></view>
					<view class="deco-circle">✨</view>
					<view class="deco-line"></view>
				</view>
				<text class="section-title">文化特色</text>
				<text class="section-desc">多元文化交融的独特魅力</text>
			</view>

			<view class="features-grid">
				<view v-for="(item, index) in features" :key="index" class="feature-card">
					<!-- 图片区域 -->
					<view class="card-image-section">
						<image :src="item.image" class="feature-image" mode="aspectFill" />
						<view class="image-overlay">
							<text class="overlay-icon">{{ item.icon }}</text>
						</view>
						<view class="category-tag">{{ item.category }}</view>
					</view>

					<!-- 内容区域 -->
					<view class="card-content">
						<text class="feature-title">{{ item.title }}</text>
						<text class="feature-description">{{ item.description }}</text>
						<view class="explore-button" @click="onExplore(item)">
							<text class="button-text">了解更多</text>
							<text class="button-arrow">→</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 传承寄语 -->
		<view class="heritage-section">
			<view class="heritage-card">
				<view class="heritage-icon">🌸</view>
				<text class="heritage-title">传承不息，文脉永续</text>
				<text class="heritage-message">
					梁河葫芦丝承载着深厚的历史文化底蕴，从远古的自然馈赠到今日的世界瑰宝，每一个音符都诉说着民族的智慧与传承。让我们共同守护这份珍贵的文化遗产，让葫芦丝的悠扬声音传遍世界每一个角落。
				</text>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图数据
				bannerImages: [{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D1.jpg'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D4.jpg'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D1.jpg'
					}
				],

				// 时间线数据
				timelineData: [{
						period: '远古溯源',
						era: '先秦时期',
						subtitle: '从自然馈赠到乐器雏形',
						icon: '🏺',
						content: [
							'葫芦丝的诞生，始于先民对自然的敬畏与巧用。梁河地处横断山脉南麓，气候温润，葫芦与竹子随处可见——葫芦是天然的容器，竹子是清脆的发声体，当先民们偶然发现这两种植物的组合能发出悦耳声响时，最原始的"葫芦丝"便在劳作与祭祀中萌芽。',
							'考古发现，梁河周边新石器时代遗址中，曾出土类似葫芦形状的陶器与竹制吹管，虽无法直接佐证为葫芦丝雏形，却印证了当地先民"以自然造物"的智慧。'
						]
					},
					{
						period: '明清定型',
						era: '明清时期',
						subtitle: '多元交融中的乐器成熟',
						icon: '🎋',
						content: [
							'至明清时期，梁河作为南方丝绸之路的重要节点，成为傣族、汉族、阿昌族、德昂族等多民族聚居之地。文化的碰撞与融合，让葫芦丝从"自然发声器"逐渐进化为形制稳定的乐器。',
							'据清代《腾越州志》记载，当地"夷人以葫芦缀三管，吹之如泣如诉，常用于婚嫁、祭祀"，这里的"三管葫芦"便是早期葫芦丝的明确记载。此时的葫芦丝已形成"一主管奏旋律，两副管伴和声"的结构。'
						]
					},
					{
						period: '近现代传承',
						era: '20世纪',
						subtitle: '从乡土之声到文化符号',
						icon: '🎵',
						content: [
							'20世纪以来，梁河葫芦丝经历了从"藏于乡野"到"走向世界"的转折。改革开放后，以哏德全为代表的梁河艺人成为葫芦丝文化的"破壁人"。',
							'哏德全在传统形制上改良葫芦丝的音孔与材质，拓宽音域至10度以上，并创作《月光下的凤尾竹》等经典曲目，让葫芦丝从民族乐器成为世界认知的中华文化符号。'
						]
					},
					{
						period: '当代新生',
						era: '21世纪',
						subtitle: '传统与创新的共生',
						icon: '🌟',
						content: [
							'如今的梁河葫芦丝，既守护着千年传承的根脉，又在创新中焕发新生。当地建起葫芦丝文化产业园，从葫芦种植、竹材选取到乐器制作，形成完整的非遗产业链。',
							'通过数字化传承、国际交流等方式，梁河葫芦丝正在新时代绽放出更加绚烂的光彩，成为连接传统与现代、本土与世界的文化桥梁。'
						]
					}
				],

				// 文化特色数据
				features: [{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D1.jpg',
						title: '多民族融合',
						icon: '🌍',
						category: '文化融合',
						description: '梁河葫芦丝承载着傣族、德昂族、阿昌族等多个民族的文化内涵，是民族文化交融的见证。不同民族的智慧在葫芦丝上得到了完美的融合和体现，展现了中华民族多元一体的文化特色。'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D2.png',
						title: '自然工艺',
						icon: '🎋',
						category: '制作技艺',
						description: '以天然葫芦和竹子为原料，体现了人与自然和谐共生的智慧理念。每一个葫芦丝都是大自然的馈赠，匠人们用传统手工技艺将这些天然材料转化为美妙的乐器。'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D3.jpg',
						title: '传承创新',
						icon: '🔄',
						category: '发展传承',
						description: '在保持传统制作工艺的基础上，不断创新演奏技法和音域拓展。传统与现代相结合，让古老的葫芦丝在新时代焕发出更加绚烂的光彩。'
					},
					{
						image: 'https://hulusi.oss-cn-beijing.aliyuncs.com/xiaochengxu/%E8%91%AB%E8%8A%A6%E4%B8%9D5.jpg',
						title: '文化载体',
						icon: '📚',
						category: '文化内涵',
						description: '葫芦丝不仅仅是乐器，更是重要的文化载体。它承载着民族的历史记忆，传递着深厚的文化内涵，是连接过去与未来的重要纽带。'
					}
				]
			}
		},
		onLoad: function(options) {
			// 页面加载时的逻辑
			this.triggerAnimations();
		},

		onReady: function() {
			// 页面初次渲染完成
			wx.setNavigationBarTitle({
				title: '文化脉络'
			});
		},

		onShow: function() {
			// 页面显示/切入前台时触发
		},

		onHide: function() {
			// 页面隐藏/切入后台时触发
		},

		onUnload: function() {
			// 页面卸载时触发
		},

		onPullDownRefresh: function() {
			// 用户下拉刷新时触发
			setTimeout(() => {
				wx.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			// 触发动画
			triggerAnimations: function() {
				setTimeout(() => {
					const query = this.createSelectorQuery();
					query.selectAll('.fade-in, .slide-up').boundingClientRect();
					query.exec();
				}, 300);
			}
		}
	}
</script>

<style lang="scss">
	/* 文化页面 - 全新设计 */
	.culture-page {
		background: linear-gradient(180deg, #f8f9ff 0%, #ffffff 100%);
		min-height: 100vh;
	}

	/* 沉浸式头部区域 */
	.immersive-header {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.header-swiper {
		width: 100%;
		height: 100%;
	}

	.header-bg {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.header-gradient {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(180deg,
				rgba(0, 0, 0, 0.3) 0%,
				rgba(0, 0, 0, 0.1) 50%,
				rgba(0, 0, 0, 0.6) 100%);
		z-index: 1;
	}

	.header-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		color: white;
		z-index: 2;
		width: 90%;
		max-width: 600rpx;
	}

	.culture-badge {
		display: inline-flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(20rpx);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		border-radius: 40rpx;
		padding: 12rpx 24rpx;
		margin-bottom: 40rpx;
	}

	.badge-emoji {
		font-size: 28rpx;
		margin-right: 8rpx;
	}

	.badge-text {
		font-size: 24rpx;
		font-weight: 500;
		color: rgba(255, 255, 255, 0.95);
	}

	.main-title {
		display: block;
		font-size: 72rpx;
		font-weight: 900;
		margin-bottom: 16rpx;
		text-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
		background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	.sub-title {
		display: block;
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		opacity: 0.9;
		text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
	}

	.description {
		display: block;
		font-size: 28rpx;
		opacity: 0.8;
		line-height: 1.6;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}

	/* 历史时光轴区域 */
	.timeline-section {
		padding: 100rpx 40rpx;
		background: #ffffff;
	}

	.section-header {
		text-align: center;
		margin-bottom: 80rpx;
	}

	.header-decoration {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
	}

	.deco-line {
		width: 80rpx;
		height: 2rpx;
		background: linear-gradient(90deg, transparent, #8c6239, transparent);
	}

	.deco-circle {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(135deg, #8c6239 0%, #d4a76a 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		margin: 0 20rpx;
		box-shadow: 0 8rpx 24rpx rgba(140, 98, 57, 0.3);
	}

	.section-title {
		display: block;
		font-size: 56rpx;
		font-weight: 900;
		background: linear-gradient(135deg, #8c6239 0%, #3a7563 100%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		margin-bottom: 20rpx;
	}

	.section-desc {
		display: block;
		font-size: 28rpx;
		color: #666;
		opacity: 0.8;
	}

	.timeline-container {
		position: relative;
		max-width: 800rpx;
		margin: 0 auto;
	}

	.timeline-line {
		position: absolute;
		left: 80rpx;
		top: 0;
		bottom: 0;
		width: 4rpx;
		background: linear-gradient(180deg, #8c6239 0%, #d4a76a 50%, #3a7563 100%);
		border-radius: 2rpx;
		opacity: 0.6;
	}

	.timeline-item {
		position: relative;
		margin-bottom: 100rpx;
		padding-left: 160rpx;
	}

	.timeline-item:last-child {
		margin-bottom: 0;
	}

	.timeline-marker {
		position: absolute;
		left: 48rpx;
		top: 30rpx;
	}

	.marker-ring {
		position: relative;
		width: 64rpx;
		height: 64rpx;
		background: linear-gradient(135deg, #8c6239 0%, #d4a76a 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(140, 98, 57, 0.4);
		z-index: 2;
	}

	.marker-icon {
		font-size: 28rpx;
		color: white;
	}

	.marker-pulse {
		position: absolute;
		top: -8rpx;
		left: -8rpx;
		width: 80rpx;
		height: 80rpx;
		border: 2rpx solid rgba(140, 98, 57, 0.3);
		border-radius: 50%;
		animation: pulse 2s infinite;
	}

	@keyframes pulse {
		0% {
			opacity: 1;
			transform: scale(1);
		}

		100% {
			opacity: 0;
			transform: scale(1.3);
		}
	}

	.timeline-card {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 40rpx;
		box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.08);
		border: 1rpx solid rgba(140, 98, 57, 0.1);
		position: relative;
		overflow: hidden;
	}

	.timeline-card::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 4rpx;
		background: linear-gradient(90deg, #8c6239 0%, #d4a76a 100%);
	}

	.card-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.period-badge {
		background: rgba(140, 98, 57, 0.1);
		color: #8c6239;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 600;
		margin-right: 20rpx;
	}

	.period-title {
		font-size: 36rpx;
		font-weight: 800;
		color: #2c2418;
	}

	.period-subtitle {
		display: block;
		font-size: 28rpx;
		font-weight: 600;
		color: #3a7563;
		margin-bottom: 30rpx;
	}

	.content-section {
		line-height: 1.8;
	}

	.content-text {
		display: block;
		font-size: 26rpx;
		color: #4a4a4a;
		margin-bottom: 20rpx;
		text-align: justify;
		line-height: 1.7;
	}

	.content-text:last-child {
		margin-bottom: 0;
	}

	/* 文化特色区域 */
	.features-section {
		padding: 100rpx 40rpx;
		background: linear-gradient(180deg, #f8f5f0 0%, #ffffff 100%);
	}

	.features-grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 40rpx;
		max-width: 800rpx;
		margin: 0 auto;
	}

	@media (min-width: 640rpx) {
		.features-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.feature-card {
		background: #ffffff;
		border-radius: 28rpx;
		overflow: hidden;
		box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.08);
		transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
		border: 1rpx solid rgba(140, 98, 57, 0.05);
	}

	.feature-card:active {
		transform: translateY(-8rpx);
		box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.12);
	}

	.card-image-section {
		position: relative;
		height: 280rpx;
		overflow: hidden;
	}

	.feature-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s ease;
	}

	.feature-card:active .feature-image {
		transform: scale(1.05);
	}

	.image-overlay {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10rpx);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
	}

	.overlay-icon {
		font-size: 28rpx;
	}

	.category-tag {
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		background: linear-gradient(135deg, #8c6239 0%, #d4a76a 100%);
		color: white;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(140, 98, 57, 0.3);
	}

	.card-content {
		padding: 36rpx 32rpx;
	}

	.feature-title {
		display: block;
		font-size: 32rpx;
		font-weight: 800;
		color: #2c2418;
		margin-bottom: 16rpx;
	}

	.feature-description {
		display: block;
		font-size: 26rpx;
		color: #5a5a5a;
		line-height: 1.6;
		margin-bottom: 28rpx;
		text-align: justify;
	}

	.explore-button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: rgba(140, 98, 57, 0.05);
		border: 1rpx solid rgba(140, 98, 57, 0.1);
		border-radius: 24rpx;
		padding: 16rpx 20rpx;
		transition: all 0.3s ease;
	}

	.feature-card:active .explore-button {
		background: rgba(140, 98, 57, 0.1);
		border-color: rgba(140, 98, 57, 0.2);
	}

	.button-text {
		font-size: 24rpx;
		font-weight: 600;
		color: #8c6239;
	}

	.button-arrow {
		font-size: 24rpx;
		color: #8c6239;
		transition: transform 0.3s ease;
	}

	.feature-card:active .button-arrow {
		transform: translateX(4rpx);
	}

	/* 传承寄语区域 */
	.heritage-section {
		padding: 100rpx 40rpx;
		background: linear-gradient(135deg, #2c2418 0%, #3a7563 100%);
	}

	.heritage-card {
		max-width: 600rpx;
		margin: 0 auto;
		text-align: center;
		color: white;
	}

	.heritage-icon {
		font-size: 80rpx;
		margin-bottom: 40rpx;
		display: block;
	}

	.heritage-title {
		display: block;
		font-size: 48rpx;
		font-weight: 900;
		margin-bottom: 40rpx;
		text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
	}

	.heritage-message {
		display: block;
		font-size: 28rpx;
		line-height: 1.8;
		opacity: 0.9;
		text-align: justify;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
	}

	/* 响应式优化 */
	@media (max-width: 480rpx) {
		.timeline-container {
			padding-left: 20rpx;
		}

		.timeline-line {
			left: 60rpx;
		}

		.timeline-item {
			padding-left: 120rpx;
		}

		.timeline-marker {
			left: 28rpx;
		}

		.marker-ring {
			width: 56rpx;
			height: 56rpx;
		}

		.marker-icon {
			font-size: 24rpx;
		}
	}

	/* 动画增强 */
	.timeline-item,
	.feature-card {
		opacity: 0;
		transform: translateY(30rpx);
		animation: fadeInUp 0.6s ease forwards;
	}

	.timeline-item:nth-child(1) {
		animation-delay: 0.1s;
	}

	.timeline-item:nth-child(2) {
		animation-delay: 0.2s;
	}

	.timeline-item:nth-child(3) {
		animation-delay: 0.3s;
	}

	.timeline-item:nth-child(4) {
		animation-delay: 0.4s;
	}

	.feature-card:nth-child(1) {
		animation-delay: 0.1s;
	}

	.feature-card:nth-child(2) {
		animation-delay: 0.2s;
	}

	.feature-card:nth-child(3) {
		animation-delay: 0.3s;
	}

	.feature-card:nth-child(4) {
		animation-delay: 0.4s;
	}

	@keyframes fadeInUp {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>